@font-face {
    font-family: "Iconify Explorer Font";
    src: url("../icons/check.svg") format("svg");
    src: url("../icons/xmark.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
.container{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    top:0;
    left:0;
    flex-wrap: wrap;
}
.container .header{
    height:12vw;
    width:100%;
    background-color: #fff;
    left:0;
    top:0;
    position: fixed;
    border-bottom: solid 1px #DDD;
    display: flex;
    font-size: 5vw;
    justify-content: center;
    align-items: center;
}
.container .main {
    height: 85vw;
    width: 100%;
    background-color: white;
    margin-bottom: 10vw;
    margin-top: 12vw;
    display: flex;
    flex-wrap: wrap;
}
.container .main .result{
    height: 85vw;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.container .main .result .mark{
    height: 55vw;
    width: 55vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.container .main .result .mark .xmark{
    height: 50vw;
    width: 50vw;
    color: red;
}
.container .main .result .mark .check{
    height: 50vw;
    width: 50vw;
    color: #38CA73;
}
.container .main .result .text{
    height: 10vw;
    width: 90vw;
    display: flex;
    font-size: 7vw;
    justify-content: center;
}
.container .backbutton{
    width: 100%;
    height: 10vw;
}
.container .backbutton .button{
    width: 100%;
    height: 10vw;
    font-size: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.5vw;
    background-color: #38CA73;
    color: #fff;
}